<template>
  <div>
    服务地址：<el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;
<!--    <el-button @click="join" type="primary">连接</el-button>
    <el-button @click="exit" type="danger">断开</el-button> -->
    <br />
    <br />
    <br />
        消息区
        <el-input type="textarea" v-model="text_content" :rows="20" readonly="" />
    <br />
    <br />
    <br />
    <br />
    发送区
    <el-input v-model="message"/>
    <el-button type="success" clearable @click="send">发送消息</el-button>
    <el-button type="success" clearable @click="sendgg">发送公告</el-button>

    <el-select v-model="selectuserid" style="margin-left: 12px;" placeholder="请选择用户">
      <el-option
        v-for="user in userlist"
        :key="user.userId"
        :label="user.userName"
        :value="user.userId"
      ></el-option>
    </el-select>
    <el-button type="success"  style="margin-left: 0px;" clearable @click="sendtz">指定用户的通知</el-button>
  </div>
</template>

<script>
import store from "@/store";
import { listUser} from "@/api/system/user";
export default {
  data() {
    return {
      url: process.env.VUE_APP_WEBSOCK,
      message: "",
      text_content: "",
      ws: null,
      userid:store.getters.userid,
      selectuserid:'',
      userlist:[]
    };
  },
  created() {
    setInterval(this.heartbeat, 30000);
    this.url+="?userid="+this.userid;
    this.getUserList();
    this.join();
  },
  methods: {
    join() {
      const wsuri = this.url;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        self.text_content = "已经打开连接!" + "\n" + self.text_content;
      };
      this.ws.onmessage = function (event) {
        self.text_content = event.data + "\n" + self.text_content;
        let r = JSON.parse(event.data);
        if(r.data=='public'){
          self.$notify({
            title: '公告',
            message: r.msg,
            position: 'bottom-right',
            duration: 0
          });
        }
        else if(r.data=='person'){
          self.$notify({
            title: '用户通知',
            message: r.msg,
            position: 'bottom-right',
            duration: 0
          });
        }
      };
      this.ws.onclose = function (event) {
        self.text_content =  "已经关闭连接!" + "\n"+ self.text_content;
      };
    },
    exit() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    heartbeat(){
      if (this.ws) {
        let data = {code:this.userid,data:"heartbeat","msg":""};
        let json = JSON.stringify(data);
        this.ws.send(json);
      }
    },
    send() {
      let data = {code:"1",data:"chat","msg":this.message}
      let json = JSON.stringify(data);
      if (this.ws) {
        this.ws.send(json);
      }
      if (this.ws.readyState === WebSocket.CONNECTING) {
          console.log("WebSocket正在连接中...");
        } else if (this.ws.readyState === WebSocket.OPEN) {
          console.log("WebSocket已经连接成功！");
        } else if (this.ws.readyState === WebSocket.CLOSING) {
          console.log("WebSocket正在关闭中...");
        } else if (this.ws.readyState === WebSocket.CLOSED) {
          console.log("WebSocket已关闭！");
        } else {
          console.log("WebSocket连接状态未知！");
        }
    },
    sendgg() {
      let data = {code:"0",data:"public","msg":this.message};
      let json = JSON.stringify(data);
      if (this.ws) {
        this.ws.send(json);
      }
    },
    sendtz() {
      //code:用户id
      let data = {code:this.selectuserid,data:"person","msg":this.message};
      let json = JSON.stringify(data);
      if (this.ws) {
        this.ws.send(json);
      }
    },
    /** 查询用户列表 */
    getUserList() {
      let queryParams = {
        pageNum: 1,
        pageSize: 999999
      };
      listUser(queryParams).then(response => {
          this.userlist = response.rows;
        }
      );
    },

  },
};
</script>
